<template>
    <div class="container">
        <el-row type="flex" justify="space-between">
            <div class="main">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
                    <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
                </el-breadcrumb>
                <h1>{{articles.title}}</h1>
                <div class="post-info">
                    <span>攻略：{{articles.updated_at|timeFormat}}</span>
                    <span>阅读：{{articles.watch}}</span>
                </div>
                <div class="post-content" v-html="articles.content"></div>
                <div class="post-ctrl">
                    <el-row type="flex" justify="center">
                        <div class="ctrl-item">
                            <i class="iconfont icon-pinglun"></i>
                            <p>评论</p>
                        </div>
                        <div class="ctrl-item">
                            <i class="iconfont icon-iconfontzhizuobiaozhun20"></i>
                            <p>分享</p>
                        </div>
                    </el-row>
                </div>
                <div class="cmt-wrapper">
                    <h4 class="cmt-title">评论</h4>
                    <div class="cmt-input">
                        <div class="el-textarea">
                            <textarea autocomplete="off" placeholder="说点什么吧..." style="resize: none; min-height: 33px;" class="el-textarea__inner"></textarea>
                        </div>
                    </div>
                </div>
                <el-row type="flex" justify="space-between cmt-input-ctrls">
                    <div class="cmt-pics">
                        <el-upload
                            list-type="picture-card"
                            name="files"
                            ref="picUploader"
                            :action="uploadURL"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handlePicRemove"
                            :on-success="uploadPicSuccess"
                            :on-error="uploadPicError"
                            >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="image preview">
                        </el-dialog>
                    </div>
                    <div>
                        <el-button
                        type="primary"
                        size="small"
                        @click="postComment"
                        :loading="isPosting"
                        >提交</el-button>

                    </div>
                </el-row>
                <div class="cmt-list">
                    <div class="cmt-item">
                        <div class="cmt-info">
                            <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" />管理员 <i>2020-03-12 5:55</i>
                            <span>2</span>
                        </div>
                        <div class="cmt-content">
                            <div class="cmt-floor">
                                <div class="cmt-content">
                                    <div class="cmt-info">
                                        管理员 <i>2020-03-12 5:55</i>
                                    </div>
                                    <p class="cmt-message">好漂亮！</p>
                                    <div class="cmt-ctrl">
                                        <a href="javascript:;">回复</a>
                                    </div>
                                </div>
                            </div>
                            <div class="cmt-new">
                                <p class="cmt-message">好漂亮！</p>
                                <div class="cmt-ctrl">
                                    <a href="javascript:;">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aside"></div>
        </el-row>
    </div>
</template>
<script>
import { timeFormat } from '@/plugins/filters'
export default {
    data(){
        return{
            articles:{},
            isPosting: false,
            dialogImageUrl: '',
            dialogVisible: false,
            currentPage: 1,
            pageSize: 5,
            totalPage: 0

        }
    },
    mounted(){
        this.getArcticlList()
    },
    filters: {
        timeFormat
    },
    computed: {
        baseURL() {
            return this.$axios.defaults.baseURL
        },
        uploadURL () {
            return this.baseURL + '/upload'
        }
  },

    methods:{
         getArcticlList(){
            const id = this.$route.query.id
            this.$axios({
                url:'/posts/'+id
            }).then(res=>{
                this.articles = res.data
            })
        },
        handlePicRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        uploadPicError(){

        },
        uploadPicSuccess(){

        },
        postComment(){}
    }
   
}
</script>
<style lang="less" scoped>
    .container{
        width: 1000px;
        margin:0 auto;
        padding:20px 0;
         font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
        word-spacing:1px;
        font-size: 16px;
        -webkit-font-smoothing:antialiased;
        .main{
            width:700px;
            h1{
                padding:20px 0;
                border-bottom: 1px solid #ddd;
            }
            .post-info{
                padding:20px;
                color:#999;
                text-align:right;
                span{
                    margin-right: 20px;
                }
            }
            .post-content{
                line-height: 1.5;
                max-width: 700px;
                ::v-deep * {
                    max-width: 700px !important;
                }   
                ::v-deep img{
                    margin:10px 0;
                }
                
            }
            .post-ctrl{
                padding:50px 0 30px;
                .ctrl-item{
                    margin:0 20px;
                    font-size: 20px;
                    text-align: center;
                    cursor: pointer;
                    i{
                        display: block;
                        font-size: 28px;
                        color: orange;
                    }
                }
            }
            .cmt-wrapper{
                margin-bottom:20px;
                .cmt-title{
                    font-size: 18px;
                    font-weight: 400;
                    margin-bottom: 20px;
                }
                .el-textarea{
                    display: inline-block;
                    width: 100%;
                    vertical-align: bottom;
                    font-size: 14px;
                }
                .cmt-input{
                    margin-bottom:10px;
                }
                .el-textarea__inner{
                    display: block;
                    padding:5px 15px;
                    line-height: 1.5;
                    box-sizing:border-box;
                    width: 100%;
                    font-size: inherit;
                    color: #606266;
                    background: #FFF;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                }
               
            }
             .cmt-input-ctrls{
                margin-bottom: 30px;
                .cmt-pics ::v-deep{
                    .el-upload{
                        width: 100px;
                        height: 100px;
                        line-height:100px;
                        &-list__item {
                        width: 100px;
                        height: 100px;
                        }
                    }
                }
                
            }
            .cmt-list{
                border:1px solid #ddd;
            }
        }
    }
</style>